<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父子组件</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
         <my-component></my-component>
    </div>
    <template id="parent">
        <div>
            <h1 >01 检索数据 </h1>
            <item-child style="color:blue" 
                        v-for="(sql,index) in sql_arrays" :key="index"
                        v-bind:zwt="sql.id" 
                        :title="sql.title" 
                        :difficulty="sql.difficulty" 
                        :rate="sql.rate" 
                        @del="del"
                        >
            </item-child>  
        </div>
    </template>

    <template id="child">
        <div style="color:red;">  
            <span style='' v-text="zwt"></span> 
            <span style='margin-left: 50px;' v-text="title"></span> 
            <span style='margin-left: 50px;' v-text="difficulty"></span>
            <span style='margin-left: 50px;' v-text="rate"></span> 
            <span style='margin-left: 50px;'><button @click="delChild(zwt)">删除</button></span>
        </div>
    </template>

    <script> 
         //子组件
         var child={
            template:'#child'
            ,props:['zwt','title','difficulty','rate']
            ,methods:{
                delChild(id){
                    //传递函数给父组件
                    this.$emit('del',id)
                }
            }
         }

         //父组件
         var parent={template:'#parent'
                    ,components:{
                        'item-child':child
                    },data(){
                        return {
                            sql_arrays:[
                                        {'id':'SQL63' ,'title':'检索顾客名称并且排序','difficulty':'中等','rate':'53.17%'}
                                        ,{'id':'SQL64' ,'title':'对顾客ID和日期排序','difficulty':'简单','rate':'53.17%'}
                                        ,{'id':'SQL65' ,'title':'按照数量和价格排序','difficulty':'简单','rate':'53.17%'}
                                        ,{'id':'SQL66' ,'title':'检查SQL语询','difficulty':'简单','rate':'53.17%'}
                                    ]

                        }
                    },methods: {
                        del(id){
                            console.log(id);
                            var idx= this.sql_arrays.findIndex(sql=>sql.id===id);
                            console.log(idx);
                            //移除数组的数据
                            this.sql_arrays.splice(idx,1);
                        }
                    },
         }

         var app =new Vue({
            el:'#app'
            ,components:{
                'MyComponent':parent
            }
         })

        // var app = new Vue({
        //     el:'#app'
        //     ,components:{
        //         'item':{
        //             template:'#parent'
        //             ,components:{
        //                 'ItemChild':
        //                 {
        //                     template:'#child'
        //                 }
        //             }
        //         }
        //     }
        // });

    </script>
</body>
</html>